.myContainner {
  background-image: url("../inoutimage/background.png");
  background-size: 100% 100%;
  height:100vh;

  .page-header {
    .header-title {
      padding-top: 1vh;
      font-size: 3vh;
      text-align: center;
      color: rgba(97, 250, 249, 255);
    }
  }

  .page-main {
    padding: 0px !important;
  }

  .container1 {
    background-image: url(../inoutimage/inout.png);
    background-size: 100% 100%;
    width: 100%;
    height: 78vh;
    position: relative;
    //margin-bottom: 5vh;
    .header1 {
      .taskText {
        top: 10%;
        width: 90%;
        text-align: center;
        font-size: 1vw;
        color: white;
        position: absolute;
      }
    }

    .main1 {
      top: 15%;
      width: 100%;
      position: absolute;
      .shouhuoBtn {
        background-image: url(../inoutimage/shouhuoBtn.png);
        background-size: 100% 100%;
        height: 3.6vh;
        width: 95%;
        margin-right: 1vw;
      }
      .shouhuoBtn:hover {
        opacity: 1;
        cursor: pointer;
      }

      .fahuoBtn {
        background-image: url(../inoutimage/fahuoBtn.png);
        background-size: 100% 100%;
        height: 3.6vh;
        width: 95%;
        margin-right: 1vw;
      }
      .fahuoBtn:hover {
        opacity: 1;
        cursor: pointer;
      }
      .rukuBtn {
        background-image: url(../inoutimage/rukuBtn.png);
        background-size: 100% 100%;
        height: 3.6vh;
        width: 95%;
        margin-right: 1vw;
      }
      .rukuBtn:hover {
        opacity: 1;
        cursor: pointer;
      }
    }

    .footer1 {
      width: 100%;
      bottom: 10%;
      position: absolute;
      .confirmBtn {
        margin-left: 30%;
        .btn {
          width: 15vw;
          margin-left: 2vw;
          opacity: 0.8;
        }
        .btn:hover {
          //background: #0E8EC1;
          //box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5);
          opacity: 1;
          cursor: pointer;
          border-radius: 8px;
        }
      }
    }
  }

  .container2 {
    background-image: url(../inoutimage/inout.png);
    background-size: 100% 100%;
    width: 100%;
    height: 78vh;
    position: relative;

    .header1 {
      .taskText {
        top: 10%;
        width: 90%;
        text-align: center;
        font-size: 1vw;
        color: white;
        position: absolute;
      }
    }

    .main1 {
      top: 15%;
      width: 100%;
      position: absolute;
      .fahuoBtn {
        background-image: url(../inoutimage/fahuoBtn.png);
        background-size: 100% 100%;
        height: 3.6vh;
        width: 95%;
        margin-right: 1vw;
      }
      .fahuoBtn:hover {
        opacity: 1;
        cursor: pointer;
      }
      .chukuBtn {
        background-image: url(../inoutimage/chukuBtn.png);
        background-size: 100% 100%;
        height: 3.6vh;
        width: 95%;
        margin-right: 1vw;
      }
      .chukuBtn:hover {
        opacity: 1;
        cursor: pointer;
      }
    }

    .footer1 {
      width: 100%;
      bottom: 10%;
      position: absolute;
      .confirmBtn {
        margin-left: 30%;
        .btn {
          width: 15vw;
          margin-left: 2vw;
          opacity: 0.8;
        }
        .btn:hover {
          //background: #0E8EC1;
          //box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5);
          opacity: 1;
          cursor: pointer;
          border-radius: 8px;
        }
      }
    }
  }

  .container3 {
    background-image: url(../inoutimage/bottom.png);
    background-size: 100% 100%;
    width: 100%;
    height: 45vh;
    position: relative;

    .header1 {
      .taskText {
        top: 10%;
        width: 90%;
        text-align: center;
        font-size: 1vw;
        color: white;
        position: absolute;
      }
    }

    .main1 {
      top: 15%;
      width: 100%;
      position: absolute;
    }

    .footer1 {
      width: 100%;
      bottom: 10%;
      position: absolute;
      .confirmBtn {
        margin-left: 75%;
        .btn {
          width: 15vw;
          margin-left: 2vw;
          z-index: 1;
          opacity: 0.8;
        }
        .btn:hover {
          //background: #0E8EC1;
          //box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5);
          opacity: 1;
          cursor: pointer;
          border-radius: 8px;
        }
      }
    }
  }

  .material-container {
    position: relative;
    .material-header {
      width: 100%;
      .header-text {
        margin-top: 3vh;
        font-size: 1.2vw;
        color: #76f0ee;
        position: absolute;
      }
    }

    .material-main {
      margin-top: 6vh;
      width: 100%;
      position: absolute;
    }

    .footer1 {
      width: 100%;
      bottom: 10%;
      position: absolute;
      .confirmBtn {
        margin-left: 75%;
        margin-top: 68vh;
        .btn {
          width: 15vw;
          margin-left: 2vw;
          z-index: 1;
          opacity: 0.8;
        }
        .btn:hover {
          opacity: 1;
          cursor: pointer;
          border-radius: 8px;
        }
      }
    }
  }

  //.bottom-row {
  //  background-image: url(../inoutimage/navigationBottom1.png);
  //  background-size: 100% 100%;
  //
  //  width: 70vw;
  //  height: 10vh;
  //  margin: 1vh auto !important;
  //
  //  .button_1,
  //  .button_2,
  //  .button_3,
  //  .button_4,
  //  .button_5 {
  //    opacity: 0.5;
  //    height: 10vh;
  //  }
  //  .button_1:hover,
  //  .button_2:hover,
  //  .button_3:hover,
  //  .button_4:hover,
  //  .button_5:hover {
  //    opacity: 1;
  //    cursor: pointer;
  //  }
  //}

  .bottom-row {
    width: 100%;
    bottom: 2vh;
    position: absolute;
    .bottom-row1 {
      background-image: url(../inoutimage/navigationBottom1.png);
      background-size: 100% 100%;
      height: 10vh;
      .button_1,
      .button_2 {
        opacity: 0.5;
        height: 8vh;
      }

      .button_1:hover,
      .button_2:hover {
        opacity: 1;
        cursor: pointer;
      }
    }
  }

  .stock-table {
    width: 90%;
    margin-left: 5%;
    //border-top: 0.3vh solid rgba(37,249,254,1);
    background-color: transparent;
    font-size: 0.9vw;
    font-weight: normal;
    color: #DADDE1;

    --el-table-text-color: white;
    --el-table-header-text-color: white;
    --el-table-border-color: #48ADE4;
    --el-table-row-hover-bg-color: rgb(118, 240, 238, 0.4);
    --el-table-current-row-bg-color: rgb(118, 240, 238, 0.4);
  }

  .stock-table :deep(*) {
    background-color: transparent;
  }

  :deep(.instock-table) {
    tr.selected {
      background-color: rgb(118, 240, 238, 0.4);
    }
  }

  .login-user {
    height: 100%;
    font-size: 2.2vh;
    color: rgba(97, 250, 249, 255);
    .right{
      margin: 3vh 0px 0px 15vw;
    }
    .image{
      height: 4vh;
    }
  }
}
